<!-- 地图找房 -->
<template lang="html">
  <div id="map-wrap">
    <section class="map-header">
      <div>
<!--         <div class="header-search pad-side-15">
          <search-input class="search-input" placeholder="请输入小区/商圈/地铁" @submit="getHouseList"></search-input>
          <i class="icon icon-menu click-extend" @click="$router.push('/rentList')"></i>
        </div> -->
        <filter-bar :showArea="false" @filterSubmit="filterSubmit"></filter-bar>
      </div>
    </section>
    <section id="map-container" ref="mapContainer">
    </section>
    <transition name="slideTop">
      <section class="community-wrap" v-show="showCommunity" @click="showCommunity = false">
        <div class="community-box" @click.stop="">
          <div class="community-title">
            <h3>{{communityName}}</h3>
            <!-- <p>1998年建造</p> -->
          </div>
          <div class="communitylist-box">
            <houseList class="house-item" v-for="(item, index) in houseData" :key="index" :houseInfo="item" :detailPath="item.houseType === 1 ? '/detail' : '/apartmentDetail'"></houseList>
          </div>
        </div>
       </section> 
    </transition>
    <div class="icon_tqzf_block" @click="$vux.toast.text('正在开发中...')">
      <ul>
        <li>
          <img src="../../images/icon_tqzf_block.png">
          <span>通勤找房</span>
        </li>
        <li>
          <img src="../../images/huaquan-house.png">
          <span>画圈找房</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="less">
  .icon_tqzf_block{
    ul>li:first-child{float: left;}
    ul>li:last-child{float: right;}
    padding: 0 2.85rem;
    box-sizing: border-box;
    width: 17.25rem;
    height: 2rem;
    position: fixed;
    left: 0.8rem;
    bottom: 1rem;
    border-radius: 0.2rem;
    text-align: center;
    background-color: #fff;
    font-size: .6rem;
    line-height: 2rem;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    color: #666;
    img{
      width: 1.1rem;
      height: 1.1rem;
      vertical-align: middle;
      margin-bottom: 0.2rem;
    }
  }
</style>
<script>
import houseList from '@/components/houseList'
import FilterBar from './child/FilterBar'
import SearchInput from './child/SearchInput'
import TXMap from '@/util/TXMap'
export default {
  components: {
    FilterBar,
    SearchInput,
    houseList
  },
  data () {
    return {
      lastZoom: 10,
      showCommunity: false,
      houseData: [],
      communityName: '',
      bounds: {},
      filterData: {}
    }
  },
  methods: {
    getCityData () {
      this.$axiosPosting(this.$api.findCityHouseCount, this.filterData).then(res => {
        if (res.code === '0000') {
          if (res.data.length === 0) this.$vux.toast.text('没有符合筛选条件数据')
          this.drawRegion(res.data)
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    getRegionData () {
      this.$axiosPosting(this.$api.findRegionHouseCount, this.filterData).then(res => {
        if (res.code === '0000') {
          if (res.data.length === 0) this.$vux.toast.text('没有符合筛选条件数据')
          this.drawRegion(res.data)
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    getScopeData () {
      let bounds = this.bounds
      let data = {
        minLongitude: bounds.lng.minX,
        maxLongitude: bounds.lng.maxX,
        minLatitude: bounds.lat.minY,
        maxLatitude: bounds.lat.maxY
      }
      this.$axiosPosting(this.$api.findScopeHouseCount, {...data, ...this.filterData}).then(res => {
        if (res.code === '0000') {
          this.drawEstate(res.data)
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    filterSubmit (filterData) { // 筛选条件
      this.filterData = filterData
      let zoom = this.lastZoom
      if (zoom <= 12) {
        this.getCityData()
      } else if (zoom > 12 && zoom <= 14) {
        this.getRegionData()
      } else if (zoom > 14) {
        this.getScopeData()
      }
    },
    update (bounds, zoom) {
      this.bounds = bounds
      // if (this.lastZoom > 12 && zoom <= 12) {
      //   this.getCityData()
      // } else if ((this.lastZoom <= 12 || this.lastZoom > 14) && zoom > 12 && zoom <= 14) {
      //   this.getRegionData()
      // } else if (zoom >= 15) {
      //   this.getScopeData()
      // } else {
      //   this.getScopeData()
      // }
      if (zoom === 11) {
        this.getRegionData()
      } else if (zoom === 15) {
        this.getScopeData()
      }
      this.lastZoom = zoom
    },
    // 绘制区域
    drawRegion (data) {
      let _this = this
      TXMap.drawOverlay({
        containerId: 'map-container',
        overlays: data,
        callback: _this.update
      })
    },
    // 绘制小区
    drawEstate (data) {
      let _this = this
      TXMap.drawThreeOverlay({
        overlays: data,
        callback: _this.getHouseList
      })
    },
    // 获取小区房源
    getHouseList (communityName, pageSize = 20) {
      this.communityName = communityName
      this.$axiosPosting(this.$api.getHousePersonsListWithConditionMap, {communityName, ...this.filterData, pageSize}).then(res => {
        if (res.code === '0000') {
          if (res.data.total === 0) {
            this.$vux.toast.text('暂无数据')
          } else {
            this.showCommunity = true
            this.houseData = res.data.houseList
          }
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    }
  },
  mounted () {
    let _this = this
    var ua = window.navigator.userAgent.toLowerCase()
    let filterData = JSON.parse(window.localStorage.getItem('filterData') || '{}')
    let filter = {
      isFreebet: filterData.isFreebet || '',
      betNum: filterData.betNum || '',
      layoutRoom: filterData.layoutRoom || '',
      layoutToilet: filterData.layoutToilet || '',
      area: filterData.area || '',
      rentalPrice: filterData.rentalPrice || '',
      direct: filterData.direct || '',
      highlights: filterData.highlights || '',
      floor: filterData.floor || '',
      decoration: filterData.decoration || '',
      isLift: filterData.isLift || ''
    }
    this.filterData = filter
    // 微信浏览器
    if (/micromessenger/.test(ua)) {
      // 微信定位
      this.getCityData()
      try {
        this.$wx.getLocation({
          type: 'gcj02', // 火星坐标
          success: function (response) { // 定位成功
            TXMap.drawOverlay({
              containerId: 'map-container',
              // lat: response.latitude,
              // lng: response.longitude,
              zoom: 10,
              location: { // 定位位置
                latitude: response.latitude,
                longitude: response.longitude
              },
              callback: _this.update
            })
            // _this.getRegionData()
            _this.getCityData()
          },
          fail: function () { // 定位失败
            // _this.$vux.toast.text('定位失败')
            _this.getCityData()
          }
        })
      } catch (e) { // 定位异常
        // _this.$vux.toast.text('定位失败')
        _this.getCityData()
      }
    } else { // 非微信浏览器
      this.getCityData()
    }
  },
  beforeDestroy () {
    window.localStorage.setItem('filterData', '')
    this.update = null
    TXMap.clearMap()
  }
}
</script>

<style lang="less" scoped>
  #map-wrap{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .icon{
      display: inline-block;
    }
    .icon-menu{
      width: 17px;
      height: 15px;
      background: url('../../images/rent/map_menu.png') center no-repeat;
      background-size: cover;
      margin-left: 12px;
    }
    .pad-side-15{
       padding: 0 15px;
       box-sizing: border-box;
    }
    .map-header{
       background: #fff;
    }
    .header-search{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 18px;
      height: 48px;
      box-sizing: border-box;
    }
    #map-container{
      flex: 1;
    }
    .community-wrap{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
      .community-box{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 65vh;
        background: #fff;
      }
      .community-title{
        padding: 10px 12px;
        height: 60px;
        border-bottom: 1px solid #f4f4f4;
        box-sizing: border-box;
        h3{
          font-size: 20px;
          color: #585858;
          line-height: 1.25;
        }
        p{
          font-size: 12px;
          color: #a3a3a3;
        }
      }
      .communitylist-box{
        position: absolute;
        top: 60px;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
    }
  }
</style>
